﻿<!DOCTYPE html>
<html>
<head>
    <title></title>    
     <link href="jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />    
    <link href="benchmarks.css" rel="stylesheet" type="text/css" />        

    <script src="jquery-1.6.2.js"></script>
     <!--<script src="jquery-ui-1.8.16.custom.js"></script>-->
          
     <script src="extensions-array.js"></script>                   
       <script src="sprintf.js"></script>     
    <script src="benchmarks.js"></script>     
    	
	<link rel="stylesheet" href="grid.css">	
    
    <script src="jquery-ui-grid/jquery.ui.core.js"></script>
    <script src="jquery-ui-grid/jquery.ui.widget.js"></script>
	<script src="jquery-ui-grid/dataitem.js"></script>
	<script src="jquery-ui-grid/datasource.js"></script>
	<script src="jquery-ui-grid/datastore.js"></script>
    <script src="jquery-ui-grid/jquery.tmpl.js"></script>    
	<script src="jquery-ui-grid/grid.js"></script>
    
   	<script>
   	    $.ui.dataitem.extend("random", {});
   	    var N = 100;

   	    $(function () {
   	        $("body").append(sprintf("%s rows, %s cols, %s", N, BENCHMARKS.M, BENCHMARKS.timeprofile(render)));
   	    });

   	    function render() {
   	        var data = BENCHMARKS.dataSource.slice(0, N), columns = [], i = 0;
   	        $("body").append("<table id='grid' ><tbody></tbody></table>");

   	        for (var key in data[0]) {
   	            columns[i] = key;   	            
   	            i++;
   	        }

   	        var datasourceTime, gridTime, start = +new Date;
   	        $.ui.datasource({
   	            type: "random",
   	            source: data
   	        });
   	        datasourceTime = $.now() - start;
   	        start = +new Date;
   	        $("#grid").grid({
   	            type: "random",
   	            columns: columns
   	        });
   	        gridTime = $.now() - start;

   	        $("<div>" +
			"<p>Items: " + N + "</p>" +
			"<p>Datasource: " + datasourceTime + "ms</p>" +
			"<p>Grid: " + gridTime + "ms</p>" +
		    "</div>").prependTo("body");
   	        
   	    };
   	    
	</script>
    <script type="text/javascript">
//        $.ui.dataitem.extend("random", {});

//        var input = [
//		[
//			"100",
//			"200",
//			"300",
//			"400",
//			"500",
//			"1000",
//			"2000"
//		],
//		[
//			"Alpha",
//			"Beta",
//			"Gamma",
//			"Zeta",
//			"Özgan",
//			"Ågren"
//		],
//		[
//			"2011-01-01",
//			"2011-05-07",
//			"2012-12-15",
//			"1948-05-30"
//		],
//		[
//			"Alpha",
//			"Beta",
//			"Gamma",
//			"Zeta",
//			"Özgan",
//			"Ågren",
//			"100",
//			"200",
//			"300",
//			"400",
//			"500",
//			"1000",
//			"2000",
//			"2011-01-01",
//			"2011-05-07",
//			"2012-12-15",
//			"1948-05-30"
//		]
//	];
//        var columns = ["number", "names", "dates", "mixed"];
//        var data = [];
//        var numItems = 1000;
//        for (var i = 0; i < numItems; i++) {
//            var row = data[data.length] = {};
//            for (var j = 0; j < 4; j++) {
//                var random = input[j][Math.floor(Math.random() * input[j].length)];
//                row[columns[j]] = random;
//            }
//        }

//        $(function () {
//            var datasourceTime, gridTime,
//			start = +new Date;
//            $.ui.datasource({
//                type: "random",
//                source: data
//            });
//            datasourceTime = $.now() - start;

//            start = +new Date;
//            $("#random").grid({
//                type: "random",
//                columns: columns
//            });
//            gridTime = $.now() - start;

//            $("<div>" +
//			"<p>Items: " + numItems + "</p>" +
//			"<p>Datasource: " + datasourceTime + "ms</p>" +
//			"<p>Grid: " + gridTime + "ms</p>" +
//		"</div>").prependTo("body");
//        });
    </script>
</head>
<body>


</body>
</html>
